/* 全局黑金主题样式 */
:root {
  /* 主色调 - 黑金配色 */
  --primary-black: #0a0a0a;
  --secondary-black: #1a1a1a;
  --tertiary-black: #2a2a2a;
  --gold-primary: #d4af37;
  --gold-secondary: #b8860b;
  --gold-accent: #ffd700;
  --gold-light: #f4e4bc;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #888888;
  --border-gold: #d4af37;
  --border-dark: #333333;
  --shadow-gold: rgba(212, 175, 55, 0.2);
  --shadow-dark: rgba(0, 0, 0, 0.5);
  --gradient-gold: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  --gradient-card: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--gradient-dark);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--secondary-black);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-gold);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-accent);
}

/* Element Plus 主题覆盖 */
.el-button--primary {
  background: var(--gradient-gold) !important;
  border: 1px solid var(--gold-primary) !important;
  color: var(--primary-black) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.el-button--primary:hover {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px var(--shadow-gold) !important;
}

.el-button--danger {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  border: 1px solid #dc3545 !important;
  color: white !important;
  font-weight: 600 !important;
}

.el-button--danger:hover {
  background: #c82333 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.el-input__wrapper {
  background: var(--tertiary-black) !important;
  border: 1px solid var(--border-dark) !important;
  box-shadow: none !important;
}

.el-input__wrapper:hover {
  border-color: var(--gold-primary) !important;
}

.el-input__wrapper.is-focus {
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 1px var(--shadow-gold) !important;
}

.el-input__inner {
  color: var(--text-primary) !important;
}

.el-input__inner::placeholder {
  color: var(--text-muted) !important;
}

.el-table {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.el-table th {
  background: var(--secondary-black) !important;
  color: var(--gold-primary) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  font-weight: 600 !important;
}

.el-table td {
  background: var(--tertiary-black) !important;
  border-bottom: 1px solid var(--border-dark) !important;
  color: var(--text-secondary) !important;
}

.el-table tr:hover > td {
  background: var(--secondary-black) !important;
}

.el-dialog {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow: 0 20px 40px var(--shadow-dark) !important;
}

.el-dialog__header {
  background: var(--secondary-black) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

.el-dialog__title {
  color: var(--gold-primary) !important;
  font-weight: 600 !important;
}

.el-dialog__body {
  color: var(--text-primary) !important;
}

.el-menu {
  background: var(--gradient-dark) !important;
  border-right: 1px solid var(--border-gold) !important;
}

.el-menu-item {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-dark) !important;
}

.el-menu-item:hover {
  background: var(--secondary-black) !important;
  color: var(--gold-primary) !important;
}

.el-menu-item.is-active {
  background: var(--gradient-gold) !important;
  color: var(--primary-black) !important;
  font-weight: 600 !important;
}

.el-select-dropdown {
  background: var(--tertiary-black) !important;
  border: 1px solid var(--border-gold) !important;
}

.el-select-dropdown__item {
  color: var(--text-secondary) !important;
}

.el-select-dropdown__item:hover {
  background: var(--secondary-black) !important;
  color: var(--gold-primary) !important;
}

.el-select-dropdown__item.selected {
  background: var(--gradient-gold) !important;
  color: var(--primary-black) !important;
}

.el-pagination {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.el-pagination .el-pager li {
  background: var(--tertiary-black) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-dark) !important;
}

.el-pagination .el-pager li:hover {
  background: var(--secondary-black) !important;
  color: var(--gold-primary) !important;
}

.el-pagination .el-pager li.is-active {
  background: var(--gradient-gold) !important;
  color: var(--primary-black) !important;
  font-weight: 600 !important;
}

.el-card {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow: 0 8px 24px var(--shadow-dark) !important;
}

.el-card__header {
  background: var(--secondary-black) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  color: var(--gold-primary) !important;
  font-weight: 600 !important;
}

.el-tag {
  background: var(--gradient-gold) !important;
  color: var(--primary-black) !important;
  border: none !important;
  font-weight: 600 !important;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-dialog {
    width: 90% !important;
    margin: 5vh auto !important;
  }
  
  .el-table {
    font-size: 12px;
  }
}

/* 特殊效果 */
.gold-glow {
  box-shadow: 0 0 20px var(--shadow-gold);
}

.gold-border {
  border: 2px solid var(--gold-primary);
  border-radius: 8px;
}

.gradient-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}